<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<script type="text/javascript" charset="utf-8">
window.UEDITOR_HOME_URL = "${basePath}/ueditor/"; 
</script>

<script type="text/javascript" src="${basePath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${basePath}/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.fileupload.js"></script>
<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.fileupload-process.js"></script>

<script type="text/javascript">
	var $modal = $('#detail-loading');
	$(function(){
		$("#insertTime").datepicker({format: 'yyyy-mm-dd'});
		var $textArea = $('#content');
		var editor = UE.getEditor('content',{

		     initialFrameHeight:871,//设置编辑器高度

		     scaleEnabled:true,
		     
		     autoFloatEnabled:false

		  });
		var $form = $('#detailForm');
		
		$form.validator({
			onValid : function(validity) {
				$(validity.field).closest('.am-form-group').find('.am-alert').hide();
			},
			onInValid : function(validity) {
				var $field = $(validity.field);
				var $group = $field.closest('.am-form-group');
				var $alert = $group.find('.am-alert');
				// 使用自定义的提示信息 或 插件内置的提示信息
				var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
				
				if (!$alert.length) {
					$alert = $('<div class="am-alert am-alert-danger"></div>').hide().appendTo($group);
				}
				
				$alert.html(msg).show();
			},
			submit : function() {
				// 同步编辑器数据
				editor.sync();
				
				var formValidity = this.isFormValid();
				
				// 表单验证未成功
				if (!formValidity) {
					// 如果未通过验证的第一个元素是Ueditor 聚焦富文本编辑器
					if($form.find('.' + this.options.inValidClass).eq(0).is($textArea)){
						editor.focus();
					}
					console.warn('验证状态：', '未通过');
				} else{
					article.save($("#articleSeqId").val());
			   	}
				return false;
			}
		});
		
		// 编辑器内容变化时同步到 textarea
		editor.addListener('contentChange', function() {
			editor.sync();
			
			// 触发验证
			$textArea.trigger('change');
		});
		
		$("#removeImage").bind("click",function(){
			$("#pictureDiv").html("");
		});
		
		// 接收图片文件
		$('#imageupload').fileupload({
			url:"${basePath}/uploadImages",
			autoUpload: true,
			iframe : true,
			maxNumberOfFiles : 1,
			add : function(e, data) {
				if (data.files[0].size > 1024*1024*10) {
					 window.parent.layer.alert('上传文件大于10M！', {
						icon : 5
					});
					return;
				}
				
				if(data.files[0].name.length > 80){
					window.parent.layer.alert('该文件名太长，请修改后再重试！', {
						icon : 5
					});
					return;
				}
				data.process().done(function() {
					$('#imageBar').fadeIn();
					data.submit();
				});
			},
			progressall : function(e, data) {
				var progress = parseInt(data.loaded / data.total* 100, 10);
				$('#imageProcessBar').css('width', progress + '%');
				$('#imageProcessBar').text(progress + '%');
			},
			done:function(e,data){
				$('#imageBar').html("<div class='am-progress-bar am-progress-bar-success' id='imageProcessBar'></div>");
				
				if(data && data.result) {
					var html = "";
					html += '<img src="' + data.result.url + '" style="max-width: 500px;"/>';
					html +=	'<input type="hidden" name="imagePath" value="' + data.result.url + '" />';
					
					$("#pictureDiv").html(html);
					parent.layer.msg("上传成功", {
					    icon: 1,
					    skin: 'layer-ext-moon'
					});
				} else {
					parent.layer.msg("上传失败", {
					    icon: 2,
					    skin: 'layer-ext-moon'
					});
				}
			}
		});
		
		$('#fileupload').fileupload({
			url:"${basePath}/uploadAttachment",
			autoUpload: true,
			iframe : true,
			maxNumberOfFiles : 3,
			add : function(e, data) {
				if (data.files[0].size > 1024*1024*10) {
					 window.parent.layer.alert('上传文件大于10M！', {
						icon : 5
					});
					return;
				}
				data.process().done(function() {
					$('#pBar').fadeIn();
					data.submit();
				});
			},
			progressall : function(e, data) {
				var progress = parseInt(data.loaded / data.total* 100, 10);
				$('#processBar').css('width', progress + '%');
				$('#processBar').text(progress + '%');
			},
			done:function(e,data){
				$('#pBar').html("<div class='am-progress-bar am-progress-bar-success' id='processBar'></div>");
				
				if(data && data.result) {
					var tempFileName = data.result.fileName;
					if(data.result.fileName.length>10){
						tempFileName = data.result.fileName.substring(0,10) + "...";
					}
					
					var html = "";
					html += "<div class='am-form-group'>";
					html += "<div class='am-u-sm-9 am-fr'>";
					html += "<button id='dowloadBtn' type='button' ";
					html += "onclick='downloadAttachment(&apos;"+data.result.url+"&apos;,&apos;"+data.result.fileName+"&apos;)' ";
					html += "title='"+data.result.fileName+"')' ";
					html += "class='am-btn am-btn-default am-btn-sm'>";
					html += "<i class='am-icon-download' style='max-width: 200px;'>" + tempFileName + "</i>";
					html += "</button>";
			    	html += "<button id='deleteFileBut'  type='button' onclick='delAttachment(this,&apos;"+data.result.id+"&apos;)' class='am-btn am-btn-danger am-btn-sm'>";
					html += "<i class='am-icon-remove'>删除附件 </i>";
					html += "</button>";
					html += "<input type='hidden' name='attachmentId' value='" + data.result.id + "' />";
					html += "</div>";
					html += "</div>";
					$("#downLoadDiv").append(html);
					parent.layer.msg("上传成功", {
					    icon: 1,
					    skin: 'layer-ext-moon'
					});
				} else {
					parent.layer.msg("上传失败", {
					    icon: 2,
					    skin: 'layer-ext-moon'
					});
				}
			}
		});
	});

	function delAttachment(obj,attachmentId){
		layer.confirm('确定删除该文件吗？', {btn: ['确定','取消'] , icon:3 }, 
		function(){
			$modal.modal();
			$.ajax({
				url : "${basePath}/manage/article/delAttachment",
				method: 'POST',
				data : {
					"attachmentId":attachmentId
				},
				dataType : 'html',
				success : function(data) {
					$modal.modal("close");
					if(data == "true" || data == true){
						parent.layer.msg("删除成功", {icon: 1});
						$("#upLoadDiv").show();
						$('#pBar').show();
						$('#pBar').html("<div class='am-progress-bar am-progress-bar-success' id='processBar'></div>");
						$(obj).parent().parent().remove();
					}
					else{
						parent.layer.msg("删除失败", {icon: 2});
					}
				},
				error : function(){
					$mainModal.modal("close");
					layer.msg("连接服务器时遇到错误！", {icon: 2});
				}
			});
		});
	}

	function downloadAttachment(fileUrl,fileName){
		var form = document.createElement("form");
		form.action = "${basePath}/downloadAttachments";
		form.method = "post";
		form.target = "_blank";
		form.style.display = "none";
		var input = document.createElement("input");
		var input1 = document.createElement("input");
		input.name = "url";
		input.type = "hidden";
		input.value = fileUrl;
		input1.name = "fileName";
		input1.type = "hidden";
		input1.value = fileName;
		
		form.appendChild(input);
		form.appendChild(input1);
		
		document.body.appendChild(form);
		
		form.submit();
		document.body.removeChild(form);
	}
</script>

<form id="detailForm" class="am-form am-form-horizontal" data-am-validator>	
<div class="am-form-group">
	<label for="title" class="am-u-sm-3 am-form-label am-text-right">文章标题</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="title" id="title" class="am-input-sm" value="${article.title}" required data-validation-message="文章标题不能为空"/>
	</div>
</div>
<div class="am-form-group">
	<label for="subTitle" class="am-u-sm-3 am-form-label am-text-right">文章子标题</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="subTitle" id="subTitle" class="am-input-sm" value="${article.subTitle}"/>
	</div>
</div>

<div class="am-form-group">
	<label for="insertUser" class="am-u-sm-3 am-form-label am-text-right">文章发布人</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="insertUser" id="insertUser"
			maxlength="20" class="am-input-sm" value="${article.insertUser}" />
	</div>
</div>

<div class="am-form-group">
	<label for="provider" class="am-u-sm-3 am-form-label am-text-right">文章提供者</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="provider" id="provider"
			maxlength="20" class="am-input-sm" value="${article.provider}" />
	</div>
</div>
<div class="am-form-group">
	<label for="description" class="am-u-sm-3 am-form-label am-text-right">文章描述</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<textarea class="am-input-sm" rows="4" name="description" id="description" >${article.description}</textarea>
	</div>
</div>
<div class="am-form-group">
	<label for="columnId" class="am-u-sm-3 am-form-label am-text-right">文章所属栏目</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<c:set value="${columns.size() <= 1}" var="readonly" />
		<select name="columnId" id="columnId" readonly="${readonly }" data-am-selected required data-validation-message="文章所属栏目不能为空">
			<c:forEach items="${columns }" var="column">
				<c:choose>
					<c:when test="${column.seqId eq article.columnId}">
						<option value="${column.seqId }" selected>${column.showName }</option>
					</c:when>
					<c:otherwise>
						<option value="${column.seqId }">${column.showName }</option>
					</c:otherwise>
				</c:choose>
			</c:forEach>
		</select>
	</div>
</div>
<div class="am-form-group">
	<label for="columnId" class="am-u-sm-3 am-form-label am-text-right">显示/屏蔽文章</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<select name="isShow" id="isShow" readonly="${readonly }" data-am-selected required data-validation-message="显示/屏蔽文章不能为空">
			<option value="1" <c:if test="${article.isShow eq 1 or empty article.isShow}">selected="selected"</c:if>>显示</option>
			<option value="0" <c:if test="${article.isShow eq 0}">selected="selected"</c:if>>屏蔽</option>
		</select>
	</div>
</div>
<div class="am-form-group">
	<label for="industry" class="am-u-sm-3 am-form-label am-text-right">行业分类</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="industry" id="industry"
			maxlength="32" class="am-input-sm" value="${article.industry}"/>
	</div>
</div>
<div class="am-form-group">
	<label for="subIndustry" class="am-u-sm-3 am-form-label am-text-right">行业子分类</label>
	<div class="am-u-sm-7 am-u-end am-form-group am-margin-0">
		<input type="text" name="subIndustry" id="subIndustry"
			maxlength="32" class="am-input-sm" value="${article.subIndustry}"/>
	</div>
</div>
<div class="am-form-group">
	<label for="insertTime" class="am-u-sm-3 am-form-label am-text-right">文章发布日期</label>
	<fmt:formatDate value="${article.insertTime}" pattern="yyyy-MM-dd" var="insertTime" />
	<div class="am-u-sm-4 am-u-md-3 am-u-lg-2 am-u-end am-form-group am-margin-0">
		<input id="insertTime" name="insertTime"
			value="${insertTime }" type="text" class="am-form-field" placeholder="文章发布日期" data-am-datepicker readonly />
	</div>
</div>
<div class="am-form-group">
	<div>
		<label class="am-u-sm-3 am-form-label am-text-right">封面图</label>
	</div>
	<div>
		<div class="am-u-sm-9">
			<div class="am-form-group">
				<button id="removeImage" type="button" class="am-btn am-btn-default am-btn-sm">
					<i class="am-icon-times">移除封面图 </i>
				</button>
			</div>
			<div class="am-form-group am-form-file">
				<button id="uploadImageBut" type="button" class="am-btn am-btn-default am-btn-sm">
					<i class="am-icon-upload">上传封面图 </i>
				</button>
				<input id="imageupload" type="file" name="file" multiple="false"
					accept="image/bmp,image/gif,image/pipeg,image/jpeg,image/svg+xml,image/x-portable-anymap,image/x-portable-bitmap,image/x-rgb,image/png" />
			</div>
			<div class="am-progress am-progress-striped am-active" id="imageBar" style="margin: 5px; width: 300px;">
				<div class="am-progress-bar am-progress-bar-success" id="imageProcessBar"></div>
			</div>
			<span style="text-align: center; font-size: 14px; color: gray;">请上传附件大小10M以内。请上传图片文件</span>
		</div>
	</div>
	<div id="pictureDiv" class="am-u-sm-9 am-text-left am-fr">
		<c:if test="${!empty article.imagePath}">
			<img src="${article.imagePath}" style="max-width: 500px;"/>
			<input type="hidden" name="imagePath" value="${article.imagePath}" />
		</c:if>
	</div>
</div>

<div class="am-form-group">
	<div>
		<label class="am-u-sm-3 am-form-label am-text-right">附件</label>
	</div>
	<div>
		<div class="am-u-sm-9">
			<div class="am-form-group am-form-file">
				<button id="uploadFileBut" type="button" class="am-btn am-btn-default am-btn-sm">
					<i class="am-icon-upload">上传附件 </i>
				</button>
				<input id="fileupload" type="file" name="file" multiple="false" />
			</div>
			<div class="am-progress am-progress-striped am-active" id="pBar" style="margin: 5px; width: 300px;">
				<div class="am-progress-bar am-progress-bar-success" id="processBar"></div>
			</div>
			<span style="text-align: center; font-size: 14px; color: gray;">请上传附件大小10M以内。</span>
		</div>
	</div>
	<div id="downLoadDiv">
		<c:if test="${!empty article.attachments}">
			<c:forEach items="${article.attachments }" var="a" varStatus="status">
				<div class="am-form-group">
					<div class="am-u-sm-9 am-fr">
						<button type="button"
							onclick="downloadAttachment('${a.filePath }','${a.fileName }')"
							title="${a.fileName }"
							class="am-btn am-btn-default am-btn-sm">
							<c:choose>
								<c:when test="${fn:length(a.fileName) > 10}">
									<c:set var="fileName" value="${fn:substring(a.fileName, 0, 10)}..." />
								</c:when>
								<c:otherwise>
									<c:set var="fileName" value="${a.fileName}" />
								</c:otherwise>
							</c:choose>
							<i class="am-icon-download" style="max-width: 200px;">${fileName}</i>
						</button>
						<button type="button"
							onclick="delAttachment(this,'${a.seqId }')"
							class="am-btn am-btn-danger am-btn-sm">
							<i class="am-icon-remove">删除附件 </i>
						</button>
						<input type="hidden" name="attachmentId" value="${a.seqId }" />
					</div>
				</div>
			</c:forEach>
		</c:if>
	</div>
</div>
	
<div class="am-form-group" style="margin: 0px auto; width: 90%; height: 1036px">
	<textarea class="am-validate" name="content" id="content" style="height : 871px;" required  data-validation-message="文章不能为空">${article.content}</textarea>
</div>

<!-- 表单隐藏域参数 -->
<input type="hidden" id="articleSeqId" name="seqId" value="${article.seqId }" />

<div class="am-form-group">
	<div class="am-u-sm-3 am-u-sm-centered">
		<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
		<button type="button" class="am-btn am-btn-primary am-btn-xs"
			onclick="article.close();">放弃保存</button>
	</div>
</div>
</form>

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="detail-loading">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">正在载入...</div>
    <div class="am-modal-bd">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>
</html>